<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>音频播放器</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <link rel="stylesheet" href="css/mobile.css">
    <!--音频播放器-->
    <link rel="stylesheet" href="audio/css/audio_player.css">
</head>

<body>
    <div class="bg_white mb_20 pb_20 pad30">
        <div class="box_radio">
            <div class="book_title">
                <div class="audio_title"> </div>
            </div>
            <div class="audio_box">
                <!--音乐控制面板-->
                <div class="audio_btn">
                    <!--快退-->
                    <img class="btn_fr" src="audio/img/btn_fr.png" alt="">
                    <!--旋转碟片-->
                    <div class="cover" id="play"></div>
                    <!--暂停/播放按钮-->
                    <div class="btn_play btn_pause"></div>
                    <!--快进-->
                    <img class="btn_ff" src="audio/img/btn_ff.png" alt="">
                </div>
                <div class="music-nav">
                    <!--当前时间-->
                    <div class="time" id="time_cur"> </div>
                    <!--进度条-->
                    <div class="audio_progress">
                        <span class="audio_line"></span>
                        <span class="audio_blue"></span>
                        <span class="audio_dot"></span>
                        <input type="range" min="0" max="0" step="0.4" value="0" id="scale">
                    </div>
                    <!--歌曲时长-->
                    <div class="time" id="time_long"></div>
                </div>
                <audio id="music" src="">
                    Your browser does not support HTML5 audio.
                </audio>
            </div>
        </div>
    </div>
    <div class="bg_white mb_20 pb_20 pad30">
        <div class="des_title">
        </div>
        <div class="des_sub_title">
            <span class="green_line"></span>
            歌词
        </div>

        <div class="des_info lyric_wrap">
            <ul id="lyric_list">

            </ul>
        </div>

        <div class="des_sub_title">
            <span class="green_line"></span>
            歌手
        </div>
        <div class="des_info" id="singer"></div>
    </div>
    <!--底部导航-->
    <div class="height100"></div>
    <ul class="tabbar">
        <img class="btn_up" src="images/btn_up.png" alt="">
        <div class="pupbox">
            <img class="btn_down" src="images/btn_down.png" alt="">
            <!--歌曲列表-->
            <ul class="song_list">
            </ul>
        </div>
        <li>
            <div class="btn_prev">
                <span>上一首</span>
            </div>
        </li>
        <li>
            <div class="btn_next">
                <span>下一首</span>
            </div>
        </li>
    </ul>

    <script src="js/jquery.min.js"></script>
    <!--旋转动画插件-->
    <script src="audio/js/jquery.rotate.min.js"></script>
    <!--音频播放器-->
    <script src="audio/js/audio_player.js"></script>
    <script>
        $(function () {
            var $pupbox = $(".pupbox"), //歌单列表
                $btnUp = $(".btn_up"), //歌单弹出按钮
                $btnDown = $(".btn_down"); //歌单隐藏按钮
            $pupbox.hide(); //歌单列表隐藏
            $btnUp.show();  //歌单弹出按钮显示
            /*弹窗*/
            $btnDown.click(function () {
                $pupbox.slideUp(500);
                $btnUp.delay(500).show(0)
            });
            $btnUp.click(function () {
                $pupbox.slideDown(500);
                $(this).hide(0)
            });
        });
    </script>
</body>

</html>